<style lang="less">
  #div_truck_load_driver_manage_sy {

  }
</style>

<template>
  <div id="div_truck_load_driver_manage_sy">
    <el-row class="f-mt f-wa f-mb10">
      <el-col :span="24">
        <ue-search-bar ref="ueSearchBar" v-model="searchForm" :data="querys" label-width="120px">
        </ue-search-bar>
      </el-col>
      <el-col :span="24">
        <el-button type="primary" class="f-wa f-fl f-ml10 f-mr20" @click="createTruckLoadDriver">新增</el-button>
        <el-button type="primary" class="f-wa f-fr f-ml10 f-mr20" @click="$refs.ueSearchBar.reset()">重置</el-button>
        <el-button type="primary" class="f-wa f-fr f-ml10" @click="searchTruckLoadDriverManageToFilters">查询</el-button>
      </el-col>
    </el-row>
    <el-table :data="truckLoadDriverTableData" border style="width: 100%">
      <el-table-column prop="createdDate" label="创建日期"></el-table-column>
      <el-table-column prop="account" label="司机账号"></el-table-column>
      <el-table-column prop="driverName" label="司机姓名"></el-table-column>
      <el-table-column prop="driverPhone" label="联系手机"></el-table-column>
      <el-table-column prop="plateNumber" label="车牌号"></el-table-column>
      <el-table-column prop="createdBy" label="创建人"></el-table-column>
      <el-table-column prop="truckLoadDriverAuthentication" label="认证状态">
        <template slot-scope="scope">
          <label v-if="scope.row.auditStatus===107008001">未审核</label>
          <label v-if="scope.row.auditStatus===107008002">待审核</label>
          <label v-if="scope.row.auditStatus===107008003">审核中</label>
          <label v-if="scope.row.auditStatus===107008004">已认证</label>
          <label v-if="scope.row.auditStatus===107008005">审核失败</label>
        </template>
      </el-table-column>
      <el-table-column prop="driverStatusName" label="启用状态"></el-table-column>
      <el-table-column prop="operation" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" class="f-wa f-ml10" v-if="scope.row.driverStatus===111002002"
                     @click="changeDriveStatus(scope.row,111002001,'启用')">启用
          </el-button>
          <el-button type="danger" class="f-wa f-ml10" v-if="scope.row.driverStatus===111002001"
                     @click="changeDriveStatus(scope.row,111002002,'禁用')">禁用
          </el-button>
          <el-button type="primary" class="f-wa f-ml10" @click="setAccount(scope.row)">账户设置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24" class="toolbar">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total,sizes,prev, pager, next, jumper"
          :total="total" style="float: right;">
        </el-pagination>
      </el-col>
    </el-row>
    <div>
      <truck-load-driver-create-dialog :truckLoadDriverModel="truckLoadDriverModel"
                                       v-on:isRefresh="isRefreshFun"></truck-load-driver-create-dialog>
      <truck-load-driver-info-dialog :accountInfo="truckLoadDriverInfo"
                                     v-on:isRefresh="isRefreshFun"></truck-load-driver-info-dialog>
    </div>
  </div>
</template>

<script>
import { objToFilter } from '../../lib/util.js';
import { searchTruckLoadDrivers, changeDriveStatus } from '../../api/v3/TruckLoadDriver.js';
import TruckLoadDriverCreateDialog from './TruckLoadDriverCreateDialog.vue';
import TruckLoadDriverInfoDialog from './TruckLoadDriverInfoDialog.vue';

export default {
  components: {
    TruckLoadDriverCreateDialog,
    TruckLoadDriverInfoDialog
  },
  data () {
    return {
      truckLoadDriverModel: {},
      truckLoadDriverInfo: {},
      searchForm: {},
      truckLoadDriverTableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  methods: {
    setAccount (row) {
      this.truckLoadDriverInfo = JSON.stringify(Object.assign(row, {
        'isShow': true,
        'time': new Date().getTime()
      }));
    },
    changeDriveStatus (row, status, statusName) {
      this.$confirm('此操作将该数据改为' + statusName + '状态, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        changeDriveStatus(row.id, status).then((res) => {
          if (res.status === 200) {
            this.$message.success(statusName + '成功');
            this.searchTruckLoadDriverManageToFilters();
          } else {
            this.$message.error(statusName + '失败');
          }
        });
      }).catch(() => {
        this.$message.info('已取消操作');
      });
    },
    isRefreshFun (val) {
      if (val) {
        this.searchTruckLoadDriverManageToFilters();
      }
    },
    createTruckLoadDriver () {
      this.truckLoadDriverModel = JSON.stringify({
        'isShow': true,
        'time': new Date().getTime()
      });
    },
    searchTruckLoadDriverManageToFilters () {
      let ob = Object.assign({}, this.searchForm);
      let filters = objToFilter(ob);
      filters = filters.replace('LIKE_truckLoadDriverAuthentication', 'EQ_truckLoadDriverAuthentication');
      this.searchTruckLoadDriverManage(filters);
    },
    searchTruckLoadDriverManage (filters) {
      console.log(filters);
      searchTruckLoadDrivers({
        filters: filters,
        sort: 'createdDate,desc',
        page: this.currentPage - 1,
        size: this.pageSize
      }).then((res) => {
        this.truckLoadDriverTableData = res.data;
        this.total = Number(res.headers['x-total-count']);
      });
    },
    handleCurrentChange (val) {
      this.currentPage = val;
      this.searchTruckLoadDriverManageToFilters();
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.searchTruckLoadDriverManageToFilters();
    }
  },
  mounted () {
    this.$store.commit('initDict');
    this.searchTruckLoadDriverManage();
  },
  computed: {
    btns () {
      return this.$store.state.btns[this.$route.path] || [];
    },
    querys () {
      return this.$store.state.querys[this.$route.path + '#TruckLoadDriverManage'] || [];
    }
  }
};
</script>
